<template>
  <div ref="mapContainer" id="map">
    <div class="img-warp">
      <div class="img-box" style="width: 80%">
        <img class="map" src="@/assets/images/map1.png" />
        <div class="img-box new">
          <div
            v-for="(item, index) in breaks"
            :key="index"
            class="son"
            :class="item.otherClass"
            :style="item.style"
            @click="changeBreak(item)"
          >
            <div
              class="value"
              :class="item.info ? getClass(item.info.content) : ''"
              :title="item.title"
            >
              <img :src="getImgUrl(item.info)" class="img" />
              <div class="circleBox">
                <div class="circle water" :class="getImgType(item.info)"></div>
                <div
                  class="circle1 water animate"
                  :class="getImgType(item.info)"
                ></div>
                <div
                  class="circle2 water animate"
                  :class="getImgType(item.info)"
                ></div>
                <div
                  class="circle3 water animate"
                  :class="getImgType(item.info)"
                ></div>
              </div>
            </div>
            <div class="tip-box">
              <span class="value">{{ item.title }}</span>
            </div>
            <div class="tip-popup">
              <div class="tip-popup-title">{{ item.title }}</div>
              <div class="tip-popup-content">
                <div>
                  <span>社会组织数量</span>
                  <span>{{ item.info.score }}</span>
                </div>
                <div>
                  <span>新增数量</span>
                  <span>{{item.title === '青龙街道' ? '3' : ''}}</span>
                </div>
                <div>
                  <span>年检率</span>
                  <span>{{item.title === '青龙街道' ? '81.9%' : ''}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import defaultPoint from '@/assets/images/default1.png'
import onePoint from '@/assets/images/one1.png'
import twoPoint from '@/assets/images/two1.png'
import threePoint from '@/assets/images/three1.png'
import fourPoint from '@/assets/images/four1.png'
import onePng from '@/assets/images/point/one1.png'
import twoPng from '@/assets/images/point/two1.png'
import threePng from '@/assets/images/point/three1.png'
import fourPng from '@/assets/images/point/four1.png'
import { areaCount } from '@/api/spotCheck/spotCheck'

const emits = defineEmits(['changeRelInfo'])
const breaks = ref([])
const tempBreaks = ref([
  {
    id: 1,
    title: '农坝镇',
    style: {
      left: '39.5%',
      top: '5%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 2,
    title: '上坝乡',
    style: {
      left: '63%',
      top: '7%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '69%'
  },
  {
    id: 3,
    title: '后叶镇',
    style: {
      left: '29%',
      top: '11%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '77%'
  },
  {
    id: 4,
    title: '江口镇',
    style: {
      left: '41%',
      top: '18%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 5,
    title: '鱼泉镇',
    style: {
      left: '49%',
      top: '16%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 6,
    title: '沙市镇',
    style: {
      left: '59%',
      top: '12%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 7,
    title: '双龙镇',
    style: {
      left: '23%',
      top: '26%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    height: '57%'
  },
  {
    id: 8,
    title: '路阳镇',
    style: {
      left: '32%',
      top: '22%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 9,
    title: '桑坪镇',
    style: {
      left: '69%',
      top: '19%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '60%'
  },
  {
    id: 10,
    title: '渠马镇',
    style: {
      left: '22%',
      top: '33%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 11,
    title: '高阳镇',
    style: {
      left: '31%',
      top: '36%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 12,
    title: '南溪镇',
    style: {
      left: '46%',
      top: '33%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 13,
    title: '双土镇',
    style: {
      left: '60%',
      top: '29%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 14,
    title: '大阳镇',
    style: {
      left: '68%',
      top: '30%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '72%'
  },
  {
    id: 15,
    title: '石门乡',
    style: {
      left: '71%',
      top: '33.5%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '74%'
  },
  {
    id: 16,
    title: '养鹿镇',
    style: {
      left: '18.5%',
      top: '38%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '83%'
  },
  {
    id: 17,
    title: '洞鹿乡',
    style: {
      left: '71%',
      top: '39%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '69%'
  },
  {
    id: 18,
    title: '平安镇',
    style: {
      left: '11%',
      top: '45%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 19,
    title: '巴阳镇',
    style: {
      left: '16%',
      top: '56%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 20,
    title: '人和街道',
    style: {
      left: '22%',
      top: '49%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 21,
    title: '黄石镇',
    style: {
      left: '35%',
      top: '45%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 22,
    title: '水口镇',
    style: {
      left: '40%',
      top: '48.5%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    height: '46%'
  },
  {
    id: 23,
    title: '云安镇',
    style: {
      left: '51.5%',
      top: '42.5%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '74%'
  },
  {
    id: 24,
    title: '云阳镇',
    style: {
      left: '60%',
      top: '47%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 25,
    title: '红狮镇',
    style: {
      left: '72%',
      top: '49%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '60%'
  },
  {
    id: 26,
    title: '龙洞镇',
    style: {
      left: '86%',
      top: '47%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    otherClass: 'other',
    height: '52%'
  },
  {
    id: 27,
    title: '双江街道',
    style: {
      left: '34.5%',
      top: '52%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 28,
    title: '青龙街道',
    style: {
      left: '38%',
      top: '56%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 29,
    title: '栖霞镇',
    style: {
      left: '49%',
      top: '52%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 30,
    title: '盘龙街道',
    style: {
      left: '30.5%',
      top: '64%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 31,
    title: '凤鸣镇',
    style: {
      left: '41%',
      top: '66%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 32,
    title: '宝坪镇',
    style: {
      left: '53%',
      top: '62%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 33,
    title: '新津乡',
    style: {
      left: '65%',
      top: '59%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    height: '48%'
  },
  {
    id: 34,
    title: '故陵镇',
    style: {
      left: '77%',
      top: '58%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '60%'
  },
  {
    id: 35,
    title: '普安乡',
    style: {
      left: '59.5%',
      top: '67%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '80%'
  },
  {
    id: 36,
    title: '堰坪镇',
    style: {
      left: '69%',
      top: '67%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    height: '55%'
  },
  {
    id: 37,
    title: '外郎乡',
    style: {
      left: '40.5%',
      top: '76%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    height: '49%'
  },
  {
    id: 38,
    title: '龙角镇',
    style: {
      left: '51%',
      top: '70%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '60%'
  },
  {
    id: 39,
    title: '蔈草镇',
    style: {
      left: '62%',
      top: '76%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    width: '66%'
  },
  {
    id: 40,
    title: '泥溪镇',
    style: {
      left: '49%',
      top: '78%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    width: '95%'
  },
  {
    id: 41,
    title: '耀灵镇',
    style: {
      left: '56%',
      top: '90%'
    },
    position: {
      left: '-32px',
      right: 'auto'
    },
    height: '56%'
  },
  {
    id: 42,
    title: '清水土家族乡',
    style: {
      left: '63%',
      top: '86%'
    },
    position: {
      left: 'auto',
      right: '-32px'
    },
    height: '46%'
  }
])
const tempDepartments = ref([
  {
    style: {
      left: '7%',
      top: '56%'
    },
    id: 1,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '13%',
      top: '49%'
    },
    id: 2,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '19%',
      top: '44%'
    },
    id: 3,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '21%',
      top: '37%'
    },
    id: 4,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '27%',
      top: '33%'
    },
    id: 5,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '28%',
      top: '23%'
    },
    id: 6,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '32%',
      top: '17%'
    },
    id: 7,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '38%',
      top: '15%'
    },
    id: 8,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '44%',
      top: '16%'
    },
    id: 9,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '50%',
      top: '14%'
    },
    id: 10,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '56%',
      top: '17%'
    },
    id: 11,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '60%',
      top: '22%'
    },
    id: 12,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '66%',
      top: '23%'
    },
    id: 13,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '72%',
      top: '22%'
    },
    id: 14,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '70%',
      top: '31%'
    },
    id: 15,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '75%',
      top: '36%'
    },
    id: 16,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '79%',
      top: '43%'
    },
    id: 17,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '67%',
      top: '39%'
    },
    id: 18,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '61%',
      top: '33%'
    },
    id: 19,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '53%',
      top: '31%'
    },
    id: 20,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '42%',
      top: '25%'
    },
    id: 21,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '34%',
      top: '27%'
    },
    id: 22,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '38%',
      top: '33%'
    },
    id: 23,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '47%',
      top: '39%'
    },
    id: 24,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '34%',
      top: '40%'
    },
    id: 25,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  },
  {
    style: {
      left: '26%',
      top: '42%'
    },
    id: 26,
    title: undefined,
    score: 0,
    content: '差',
    img: fourPng
  }
])
const departments = ref([])
const getClass = (content) => {
  if (content === '优') return 'one p'
  if (content === '良') return 'two p'
  if (content === '中') return 'three p'
  if (content === '差') return 'four p'
  return ''
}
const getImgUrl = ({ content } = {}) => {
  if (content === '优') return onePoint
  if (content === '良') return twoPoint
  if (content === '中') return threePoint
  if (content === '差') return fourPoint
  return defaultPoint
}
const getImgType = ({ content } = {}) => {
  if (content === '优') return 'one'
  if (content === '良') return 'two'
  if (content === '中') return 'three'
  if (content === '差') return 'four'
  return ''
}
const changeBreak = ({ title, info } = {}) => {
  emits('changeRelInfo', info)
  // if (info && info.id && !this.isNew) {
  //   this.hasCancel = true
  //   this.$emit('changeRelInfo', info.id, title)
  // }
}
const getDepartment = (score) => {
  let info = {
    content: '差',
    img: fourPng
  }
  if (score > 95) {
    info.content = '优'
    info.img = onePng
  } else if (score > 90) {
    info.content = '良'
    info.img = twoPng
  } else if (score > 85) {
    info.content = '中'
    info.img = threePng
  } else if (score < 85) {
    info.content = '差'
    info.img = fourPng
  } else {
    info.content = '无'
    info.img = threePng
  }
  return info
}

onMounted(() => {
  areaCount().then((res) => {
    let breaksData = []
    tempBreaks.value.forEach((item) => {
      let obj = Object.assign({}, item)
      const info = res.data.find((i) => i.shortAddress === item.title)
      if (info) {
        obj.info = {
          id: info.shortAddress,
          score: info.count,
          //等级
          //content: getDepartment(info.count).content
          content: '优'
        }
      } else {
        obj.info = {
          id: item.id,
          score: 0,
          content: getDepartment(0).content
        }
      }
      breaksData.push(obj)
    })
    breaks.value = [...breaksData]
  })
  console.log('breaks',breaks)
  return
  const res = {
    area_score: [
      {
        id: '0ffdbdee-d5f9-430f-be34-40e8f8d8c407',
        area: '云阳镇',
        score: 100
      },
      {
        id: '1573270e-b77e-42af-9ccf-e8da3bfef55c',
        area: '云安镇',
        score: 100
      },
      {
        id: '16c76f46-7662-4f2e-97a1-3bbc5b79d1f7',
        area: '水口镇',
        score: 100
      },
      {
        id: '39234240-cccf-48ca-9ada-d7cb00fd0c81',
        area: '农坝镇',
        score: 100
      },
      {
        id: '4725196f-05f0-4b0a-8068-403783d9fdbc',
        area: '双江街道',
        score: 100
      },
      {
        id: '4db683c2-932e-4682-affb-cd0f724f55b8',
        area: '堰坪镇',
        score: 100
      },
      {
        id: '51409d62-2f1c-4cba-be8d-9bdbd666d61c',
        area: '龙洞镇',
        score: 100
      },
      {
        id: '51702dfa-ca98-487e-b722-43120698d4b3',
        area: '外郎乡',
        score: 100
      },
      {
        id: '53f8303a-254a-4f41-8234-413b43c75914',
        area: '双龙镇',
        score: 100
      },
      {
        id: '55305c11-b059-4a50-be39-bcb1d62e6d43',
        area: '巴阳镇',
        score: 100
      },
      {
        id: '569795f9-6d0e-4300-95ca-3e24961b7dc8',
        area: '故陵镇',
        score: 100
      },
      {
        id: '5822e239-9bc2-469b-8e1f-eb2debea0a2e',
        area: '桑坪镇',
        score: 100
      },
      {
        id: '586914d6-8a33-4f8a-8e93-0b839a6dce29',
        area: '高阳镇',
        score: 100
      },
      {
        id: '6b0efd6b-3eea-40d2-a123-131c7aeccc0a',
        area: '人和街道',
        score: 100
      },
      {
        id: '70dc6f13-8e90-44eb-91a1-ce1f63feff25',
        area: '泥溪镇',
        score: 100
      },
      {
        id: '7fa33d2c-3049-4ef0-abf4-17ac4630bc03',
        area: '蔈草镇',
        score: 100
      },
      {
        id: '80fe9291-4cb5-4dd9-a4df-729605698a45',
        area: '黄石镇',
        score: 100
      },
      {
        id: '8bf56ab9-637d-448d-bc2e-4adb06a2ea6b',
        area: '双土镇',
        score: 100
      },
      {
        id: '8df74e74-63ca-47f1-a9f4-eb19fcc70353',
        area: '盘龙街道',
        score: 100
      },
      {
        id: '8f04ac6e-c9fc-4f26-aec3-e532f9aacead',
        area: '鱼泉镇',
        score: 100
      },
      {
        id: '932b9407-de9b-4a55-a68b-1fa1b6d7f11a',
        area: '渠马镇',
        score: 100
      },
      {
        id: '98da43fc-23e3-478a-8a25-fe70ab57a2fe',
        area: '江口镇',
        score: 100
      },
      {
        id: '9ddf5838-25f2-48e2-9b13-42be90454364',
        area: '石门乡',
        score: 100
      },
      {
        id: 'a4a4763a-2826-4c8e-9585-bb9fb9aac9a8',
        area: '栖霞镇',
        score: 100
      },
      {
        id: 'b1a02cda-5713-4dc0-8da1-685deb444eec',
        area: '凤鸣镇',
        score: 100
      },
      {
        id: 'bf177c1d-ac7c-4520-92fe-b1d2ffaf1c11',
        area: '大阳镇',
        score: 100
      },
      {
        id: 'c0b882e7-6446-4bc8-ac45-af2204a379af',
        area: '洞鹿乡',
        score: 100
      },
      {
        id: 'c1017a63-d99b-4aa5-b82c-7b8a6f20899f',
        area: '路阳镇',
        score: 100
      },
      {
        id: 'c23bdf47-d75e-43c5-adcd-2a3c337b97a7',
        area: '红狮镇',
        score: 100
      },
      {
        id: 'c8c7301b-2853-4967-9d3e-8919fabb2af1',
        area: '清水土家族乡',
        score: 100
      },
      {
        id: 'c9a63ee0-cdb1-4848-9339-ce84ffbf5522',
        area: '普安乡',
        score: 100
      },
      {
        id: 'ca6ecc0c-a841-4b9a-b91c-db34219fb13d',
        area: '青龙街道',
        score: 100
      },
      {
        id: 'cc3db61c-fb33-4f87-98c9-6865ffa8fa25',
        area: '宝坪镇',
        score: 100
      },
      {
        id: 'ccce22e3-b0dc-4939-beba-dc8af451df0f',
        area: '南溪镇',
        score: 100
      },
      {
        id: 'da23cce3-79f9-4016-8980-df0871367048',
        area: '养鹿镇',
        score: 100
      },
      {
        id: 'da24e561-58ea-4a59-94fc-42e70d97ade6',
        area: '沙市镇',
        score: 100
      },
      {
        id: 'dcbc1693-72b9-4c83-a200-1e816e50a833',
        area: '后叶镇',
        score: 100
      },
      {
        id: 'e498a488-bd5b-4cf3-a11c-75e285427ed6',
        area: '耀灵镇',
        score: 100
      },
      {
        id: 'f6e927ee-486f-41a8-bffa-e5b8befaa436',
        area: '平安镇',
        score: 100
      },
      {
        id: 'fa3ca3dc-ba3d-4811-92fd-2188e573bd94',
        area: '上坝乡',
        score: 100
      },
      {
        id: 'fda3269d-7fa3-45bc-9ec8-4dc64a1cc28d',
        area: '龙角镇',
        score: 100
      },
      {
        id: '2c4e4283-279c-450e-b2a5-715cec52da89',
        area: '新津乡',
        score: 97
      }
    ],
    department_score: [
      {
        id: '039b18a8-6468-4496-9b9f-7862ee6ba8de',
        name: '县人力社保局',
        score: 100
      },
      {
        id: '0ab9942c-7046-4e6a-9ec6-29b1d6ea4ccb',
        name: '就业局',
        score: 100
      },
      {
        id: '0c0de335-ac2f-4df6-bf0d-265bb5779790',
        name: '县交巡警大队',
        score: 100
      },
      {
        id: '0c932c7b-e83a-492e-997d-295e2470b552',
        name: '县残联',
        score: 100
      },
      {
        id: '1170263d-ee1d-4c39-ab18-78e9747c9d7b',
        name: '县文化旅游委',
        score: 100
      },
      {
        id: '16c6ae41-41e5-4962-9853-5d49a31a1126',
        name: '县妇联',
        score: 100
      },
      {
        id: '1e710b31-4c7a-4f69-ac78-bb4103228d0e',
        name: '县文联',
        score: 100
      },
      {
        id: '2046971f-443b-4ecd-ab6d-2fe3377cc049',
        name: '县纪委监委机关',
        score: 100
      },
      {
        id: '22d27f0c-aa56-4a54-9da7-d8ef931f0424',
        name: '县财政局',
        score: 100
      },
      {
        id: '22fa87cf-5622-4d77-9305-6840b6041d23',
        name: '北部新区管委会',
        score: 100
      },
      {
        id: '23153c99-6870-42d9-9dfd-de3cd23a1666',
        name: '县人大常委会办公室',
        score: 100
      },
      {
        id: '243dc3bb-6bb7-49e8-bbf0-8b1274914786',
        name: '工业园区管委会',
        score: 100
      },
      {
        id: '2777021d-1253-433f-b629-3eb238003ae0',
        name: '县委政法委',
        score: 100
      },
      {
        id: '2dd976f0-5119-44c9-99c9-5ff5a980c51c',
        name: '县教委',
        score: 100
      },
      {
        id: '3d9bcf1b-46a0-4c29-b190-80abbf57e8ec',
        name: '县科协',
        score: 100
      },
      {
        id: '3e1bb7ba-fee8-418d-a89c-be0ae89302fd',
        name: '县经济信息委',
        score: 100
      },
      {
        id: '3ea9bc4b-5dcc-4d76-addc-4294137fdc64',
        name: '县市场监管局',
        score: 100
      },
      {
        id: '4184fb54-4836-4916-b532-c0028ad7153f',
        name: '县大数据发展局',
        score: 100
      },
      {
        id: '41a22b6c-fda4-41cb-9293-7fb566afa27c',
        name: '县测试单位',
        score: 100
      },
      {
        id: '425a89a9-aa0d-40e5-8855-d3964a745752',
        name: '县公安局',
        score: 100
      },
      {
        id: '54dfde5a-03e9-4355-8ecb-3e183978bbda',
        name: '县农业农村委',
        score: 100
      },
      {
        id: '570654d9-7ceb-41d4-9533-2ace748fe93c',
        name: '县民政局',
        score: 100
      },
      {
        id: '5d335720-09cd-4cc4-add9-9cb16aee10cd',
        name: '县委统战部',
        score: 100
      },
      {
        id: '5e314318-bbbe-4b6a-8319-4c8328fd7be9',
        name: '县水利局',
        score: 100
      },
      {
        id: '5f96f29f-e243-497b-b310-9c973896d5b5',
        name: '县总工会',
        score: 100
      },
      {
        id: '60a61895-9ca1-43ce-98f0-75cb9688dc1c',
        name: '县统计局',
        score: 100
      },
      {
        id: '618aa56e-31e7-4eb0-a822-e38fb1ce6dca',
        name: '县卫生健康委',
        score: 100
      },
      {
        id: '6449361f-6306-4a8f-bb28-cbcdb0e2c929',
        name: '县委宣传部',
        score: 100
      },
      {
        id: '68fb628f-bd24-4fe7-b329-77631a9e38f0',
        name: '县委党校',
        score: 100
      },
      {
        id: '6afc7418-5620-4c89-bb15-f36ba8352447',
        name: '县工商联',
        score: 100
      },
      {
        id: '783671e2-5e58-46f1-a9b2-c54cd8b448a7',
        name: '县商务委',
        score: 100
      },
      {
        id: '887f7289-0cc2-4162-8635-ca94aa46c680',
        name: '县政协办公室',
        score: 100
      },
      {
        id: '89ca5a6a-caed-4a05-8e3f-d543ffeeff02',
        name: '县住房城乡建委',
        score: 100
      },
      {
        id: '8df587ab-0ee7-491e-9b8e-ce80d4d48007',
        name: '县规划自然资源局',
        score: 100
      },
      {
        id: '923923df-9dad-465a-aec4-bae93f71cdbb',
        name: '县司法局',
        score: 100
      },
      {
        id: '96923a48-a53c-41cf-857a-6f4169116ed2',
        name: '县乡村振兴局',
        score: 100
      },
      {
        id: '97af26e0-375f-46c9-9fb1-87db189599c3',
        name: '县委组织部',
        score: 100
      },
      {
        id: 'a0f73579-827a-4806-abc3-f83430c6ea78',
        name: '县信访办',
        score: 100
      },
      {
        id: 'a1ad83d4-5ad0-4a28-9adf-c557ec13a59a',
        name: '县生态环境局',
        score: 100
      },
      {
        id: 'a526bb5d-4197-4207-938d-eb9c689eaaff',
        name: '县委办公室',
        score: 100
      },
      {
        id: 'a56f7352-ecc5-4bec-8c57-b317b4c4949e',
        name: '县林业局',
        score: 100
      },
      {
        id: 'a5b12d13-5d29-4a3b-ab02-876154f1fff0',
        name: '团县委',
        score: 100
      },
      {
        id: 'a5b41ef8-0279-4b6b-9062-74e3570cef36',
        name: '县城市管理局',
        score: 100
      },
      {
        id: 'ab7c36d1-436c-4ba1-bb0f-949b5724517e',
        name: '乡村振兴局',
        score: 100
      },
      {
        id: 'ad42dea4-68d4-4966-bdef-5e2ba82fda78',
        name: '县政府办公室',
        score: 100
      },
      {
        id: 'bfd6da20-8f8d-4be9-99cd-1c717133baa5',
        name: '县退役军人事务局',
        score: 100
      },
      {
        id: 'c1434e78-ef43-48f1-b61b-bc5df8cc2426',
        name: '县应急管理局',
        score: 100
      },
      {
        id: 'cad32e7d-6cb0-4aad-a5c9-7cd534d1d55a',
        name: '县人武部',
        score: 100
      },
      {
        id: 'ccb07064-e2e9-4567-9653-33e3092f2a9b',
        name: '云阳县消防救援大队',
        score: 100
      },
      {
        id: 'ce99e870-7719-42bb-b849-d447185fc39e',
        name: '县委编办',
        score: 100
      },
      {
        id: 'd207d0ce-e435-4de9-8a11-7644577b35d0',
        name: '普安恐龙化石管委会',
        score: 100
      },
      {
        id: 'e38d63c3-2db0-4f0a-981b-773e78c01a30',
        name: '县发展改革委',
        score: 100
      },
      {
        id: 'e51ee624-7176-4973-aa09-defd2795f470',
        name: '县审计局',
        score: 100
      },
      {
        id: 'ee8365ab-ef24-4860-8b0b-2f0dd1aeff08',
        name: '县城市管理综合行政执法支队',
        score: 100
      },
      {
        id: 'eead2213-6947-4943-92d1-07e15262f554',
        name: '县交通局',
        score: 100
      },
      {
        id: 'f2227518-4596-4998-bec4-ba45c7375952',
        name: '县委党研室',
        score: 100
      },
      {
        id: 'f706b3aa-bdac-4c9e-93da-fa9683bff2c3',
        name: '123',
        score: 100
      },
      {
        id: 'fd02ae81-8584-4cca-a775-2dbcc627aaa8',
        name: '县医保局',
        score: 100
      },
      {
        id: '3874f086-2acd-4cc0-99fb-2817ca93b1fc',
        name: '政府部门',
        score: 99
      }
    ]
  }
  let breaksData = []
  if (res.area_score && res.area_score.length) {
    tempBreaks.value.forEach((item) => {
      let obj = Object.assign({}, item)
      const info = res.area_score.find((i) => i.area === item.title)
      if (info) {
        obj.info = {
          id: info.id,
          score: info.score,
          content: getDepartment(info.score).content
        }
      } else {
        obj.info = {
          id: item.id,
          score: 0,
          content: getDepartment(0).content
        }
      }
      breaksData.push(obj)
    })
  }
  breaks.value = [...breaksData]
  let departmentsData = []
  if (res.department_score && res.department_score.length) {
    res.department_score.forEach((item, index) => {
      let style = {
        style: {
          left: Math.floor(Math.random() * (80 - 1 + 1)) + 1 + '%',
          top: Math.floor(Math.random() * (80 - 1 + 1)) + 1 + '%'
        }
      }
      const obj = Object.assign(
        {},
        tempDepartments.value[index] || style,
        item,
        {
          id: item.id,
          title: item.name
        },
        getDepartment(item.score)
      )
      departmentsData.push(obj)
    })
  }
  console.log(departmentsData)
  departments.value = [...departmentsData]
})
</script>

<style scoped lang="scss">
// 定义水波动画
@keyframes circleChange {
  0% {
    transform: rotateX(45deg) scale3d(1, 1, 1);
    opacity: 0.95;
  }
  25% {
    transform: rotateX(45deg) scale3d(2, 2, 2);
    opacity: 0.75;
  }
  50% {
    transform: rotateX(45deg) scale3d(3, 3, 3);
    opacity: 0.5;
  }
  75% {
    transform: rotateX(45deg) scale3d(4, 4, 4);
    opacity: 0.25;
  }
  100% {
    transform: rotateX(45deg) scale3d(5, 5, 5);
    opacity: 0.05;
  }
}

#map {
  width: 100%;
  height: 7.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img-warp {
    height: 100%;
    position: relative;
    .img-box {
      height: 100%;
      text-align: center;
      position: relative;
      .map {
        height: 100%;
      }
      &.new {
        position: absolute;
        width: 128%;
        height: 97%;
        top: 0;
        left: 0;
      }
      .son {
        position: absolute;
        width: 6%;
        .value {
          position: relative;
          .img {
            position: absolute;
            width: 50%;
            top: -8px;
            left: 25%;
            // display: none;
          }
          .circleBox {
            position: relative;
            transform-style: preserve-3d;
            perspective: 150;
            .water {
              width: 0.05rem;
              height: 0.05rem;
              background: #d0e9ff60;
              border: 1px solid #d0e9ff60;
              border-radius: 999px;
              position: absolute;
              top: 12px;
              left: 50%;
              margin-left: -3px;
              transform: rotateX(45deg);
              &.animate {
                animation-name: circleChange;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                &.circle1 {
                  animation-delay: 1s;
                }
                &.circle2 {
                  animation-delay: 2s;
                }
                &.circle3 {
                  animation-delay: 3s;
                }
              }
              &.one {
                background: #35c39060;
                border: 1px solid #35c39060;
              }
              &.two {
                background: #4bafff60;
                border: 1px solid #4bafff60;
              }
              &.three {
                background: #e67a1c60;
                border: 1px solid #e67a1c60;
              }
              &.four {
                background: #f7434360;
                border: 1px solid #f7434360;
              }
            }
          }
        }
        .tip-box {
          position: absolute;
          //width: 227px;
          top: -40px;
          left: 50% !important;
          transform: translateX(-50%);
          background-image: url('@/assets/images/xf1.png');
          background-size: 100% 100%;
          font-size: 0.1rem;
          color: #fff;
          text-align: left;
          z-index: 1;
          font-weight: bolder;
          padding: 0.08rem;
          padding-left: 0.13rem;
          //display: none;
          display: flex;
          white-space: nowrap;
          .value {
            color: #fff;
          }
        }
        //&:hover {
        //  .tip-box {
        //    display: flex;
        //    justify-content: space-around;
        //  }
        //}
      }
    }
  }
  .tool-box {
    position: absolute;
    bottom: 20px;
    right: 10px;
    line-height: 30px;
    .tool-son {
      color: #fff;
      .icon {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 10px;
      }
      .value {
        display: inline-block;
        width: 40px;
      }
      .content {
        display: inline-block;
        width: 50px;
        text-align: right;
      }
    }
  }
  .tip-popup {
    width: 1.3rem;
    height: 0.7rem;
    position: absolute;
    //width: 227px;
    padding: 0.1rem 0.15rem;
    top: -1.02rem;
    left: 50% !important;
    transform: translateX(-50%);
    background-image: url('@/assets/images/xf.png');
    background-size: 100% 100%;
    z-index: 99;
    display: none;
    .tip-popup-title {
      font-size: 0.15rem;
      font-weight: bold;
      color: #fff;
      text-align: left;
      margin-bottom: 0.05rem;
    }
    .tip-popup-content {
      display: flex;
      flex-wrap: wrap;
      & > div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.02rem;
        span {
          color: #bebfc3;
          font-size: 0.13rem;
        }
      }
    }
  }
  .son:hover .tip-popup {
    display: block;
  }
  .son:hover .tip-box {
    display: none !important;
  }
  .son {
    cursor: pointer;
  }
}
</style>
